<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <%@ include file="../../include/easyui.jsp" %>
    <%@ include file="../../include/pGrid.jsp" %>
    <script type="text/javascript" src="${path}/plug-in/echart/echarts.min.js"></script>
    <html>
    <head>
        <title>工程收入机构统计报表</title>
    </head>
<body class="easyui-layout">   
  <div data-options="region:'north',split:false,border:false" style="height:70px;">
	  	<div style="padding: 20px;">
	        <input type="text" name="startTime" id="s_order_month" style="width:240px;" data-options="label:'查询时间',labelWidth:75,required:false"/>
	        &nbsp;&nbsp;~&nbsp;&nbsp;
	        <input type="text" name="endTime" id="s_order_month1" style="width:160px;" data-options="required:false" />
	        <a href="#" class="easyui-linkbutton" iconCls="icon-search" motion_code="05" plain="true">查询</a>
	    </div>
	</div>
  </div>   
  <div data-options="region:'center',border:false" style="padding:5px;">
  	<div id="main" style="width: 100%;height:85%;"></div>
  </div>   
</body>  
<script type="text/javascript">
    // 指定图表的配置项和数据
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        title : {
            text: '工程收入机构统计报表（单位:万元）',
            x:'center'
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c}"
        },
        grid: {
	    	y2:100
	    },
        xAxis: {
            type: 'category',
            data: [],
	        axisLabel:{
	        	interval:0,//横轴信息全部显示
			    rotate:-40//-30度角倾斜显示
	        }
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(function (){
        $.getJSON("/console/statistics/rewrite/echart", {type:'collect'}, function(result){
            if(result.flag){
                myChart.setOption({
                    xAxis:{
                        data: result.data.legendData
                    },
                    series:[
                        {
                            name:'支出类别',
                            data: result.data.seriesData,
                            type: 'bar'
                        }
                    ]
                });
            }
        });
        $(".easyui-linkbutton").on("click", function() {
            var motion_code = $(this).attr("motion_code");p.btnOneClick($(this));
            switch (motion_code) {
                case "05":
                    var startTime = $("#s_order_month").val();
                    var endTime = $("#s_order_month1").val();
                    $.getJSON("/console/statistics/rewrite/echart", {type:'collect',startTime:startTime,endTime:endTime}, function(result){
                        if(result.flag){
                            myChart.setOption({
                                xAxis:{
                                    data: result.data.legendData
                                },
                                series:[
                                    {
                                        name:'支出类别',
                                        data: result.data.seriesData,
                                        type: 'bar'
                                    }
                                ]
                            });
                        }
                    });
                    break;
                default:
                    break;
            }
        });

        var tds = false;
        $("#s_order_month").datebox({
            onShowPanel:function(){
                var p = $('#s_order_month').datebox('panel');
                p.find('span.calendar-text').trigger('click');
                p.find(".datebox-button-a").eq(0).hide();

                var span = p.find('span.calendar-text');
                //屏蔽选择今天的按钮
                p.find('.calendar-text').hide();
                //输入框原本可填，会触发事件，屏蔽掉
                p.find('.calendar-menu-year').attr("readonly","readonly");
                if (!tds)//初始化只需要捆绑一次事件就够了
                    setTimeout(function () {
                        tds =p.find('div.calendar-menu-month-inner td');
                        tds.click(function (e) {
                            e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                            var year = /\d{4}/.exec(span.html())[0]//得到年份
                            month = parseInt($(this).attr('abbr'), 10); //月份
                            $('#s_order_month').datebox('hidePanel').datebox('setValue', year + '-' + month + '-' + '01'); //设置日期的值
                        });
                    });
            },
            formatter: function (d) {//设置格式
                return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
            }
        });

        var tda = false;
        $("#s_order_month1").datebox({
            onShowPanel:function(){
                var p = $('#s_order_month1').datebox('panel');
                p.find('span.calendar-text').trigger('click');
                p.find(".datebox-button-a").eq(0).hide();

                var span = p.find('span.calendar-text');
                //屏蔽选择今天的按钮
                p.find('.calendar-text').hide();
                //输入框原本可填，会触发事件，屏蔽掉
                p.find('.calendar-menu-year').attr("readonly","readonly");
                if (!tda)//初始化只需要捆绑一次事件就够了
                    setTimeout(function () {
                        tda =p.find('div.calendar-menu-month-inner td');
                        tda.click(function (e) {
                            e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                            var year = /\d{4}/.exec(span.html())[0]//得到年份
                            month = parseInt($(this).attr('abbr'), 10); //月份
                            $('#s_order_month1').datebox('hidePanel').datebox('setValue', year + '-' + month + '-' + '01'); //设置日期的值
                        });
                    });
            },
            formatter: function (d) {//设置格式
                return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
            }
        });

        $(".datebox :text").attr("readonly","readonly");//日期框禁止输入
    });

</script>
</html>